<template>
  <view class="mz-list">
    <scroll-view
      class="scroll-view"
      :scroll-y="true"
      :scroll-top="scrollTopValue"
      :scroll-with-animation="false"
      :refresher-enabled="refresherEnabled"
      :refresher-triggered="triggered"
      :lower-threshold="100"
      refresher-background="#f8f8f8"
      @scroll="onScroll"
      @scrolltolower="handleCurrentChange"
      @refresherrefresh="reset"
    >
      <slot></slot>
      <uni-load-more :status="status" :content-text="contentText"></uni-load-more>
      <!-- <view class="tip">
        <text v-if="loading&&!showFinish">{{ loadingText }}</text>
        <text v-if="showFinish">{{ FinishedText }}</text>
      </view>-->
    </scroll-view>
  </view>
</template>

<script>
export default {
  props: {
    fetchData: {
      type: Function,
      default: () => {}
    },
    pageSize: {
      type: Number,
      default: () => 5
    },
    total: {
      type: Number,
      default: () => null
    },
    // 没有更多值提示
    FinishedText: {
      type: String,
      default: "暂无更多"
    },
    // 正在加载提示
    loadingText: {
      type: String,
      default: "加载中..."
    },
    finished: {
      type: Boolean,
      default: () => false
    },
    error: {
      type: Boolean,
      default: () => false
    },
    loading: {
      type: Boolean,
      default: () => false
    },
    // 是否自动提交
    auto: {
      type: Boolean,
      default: true
    },
    refresherEnabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      page: 1,
      pageNum: 0,
      // noMore: false, // 没有更多了
      scrollTopValue: 0,
      scrollTopValueOld: 0,
      triggered: true,
      contentText: {
        contentdown: "上拉显示更多",
        contentrefresh: this.loadingText,
        contentnomore: this.FinishedText
      }
    };
  },
  computed: {
    showFinish() {
      return this.noMore || this.finished;
    },
    noMore() {
      return (
        (this.total || this.total === 0) &&
        this.pageNum * this.pageSize >= this.total
      );
    },
    status() {
      if (this.loading && !this.showFinish) return "loading";
      if (this.showFinish) return "noMore";
    }
  },
  created() {
    if (this.auto) this.fetchDataByPage();
  },
  methods: {
    stopRefresh() {
      this.triggered = false;
      uni.stopPullDownRefresh();
    },
    fetchDataByPage() {
      this.pageNum++;
      let pageParams = {
        pageNum: this.pageNum,
        pageSize: this.pageSize
      };
      this.fetchData(pageParams);
    },
    finishRequest(data) {
      let { pageNum, pageSize, total } = data;
    },
    handleCurrentChange() {
      if (!this.showFinish) this.fetchDataByPage();
    },
    reset() {
      this.pageNum = 0;
      this.fetchDataByPage();
    },
    /**
     * 滚动事件
     */
    onScroll(e) {
      this.scrollTopValueOld = e.detail.scrollTop;
      this.$emit("scroll", e);
    },
    /**
     * 滚动到顶部
     */
    scrollTop() {
      this.scrollTopValue = this.scrollTopValueOld;
      this.$nextTick(function() {
        this.scrollTopValue = 0;
      });
    }
  }
};
</script>

<style lang="css" scoped>
.mz-list {
  height: 100%;
}
.scroll-view {
  height: 100%;
  /* position: absolute; */
}
.tip {
  height: 100upx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999999;
  font-size: 28upx;
}
</style>
